<template>
    <!--note 只能在list中使用：加载更多-->
    <cell :style="{visibility: (loading ? 'visible' : 'hidden')}">
        <div class="loading">
            <text class="loading-text" :style="{color: color}">正在加载 ...</text>
        </div>
    </cell>
</template>

<style scoped>
.loading {
    padding-top: 16px;
    padding-bottom: 16px;
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-text {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 30px;
    font-family: msyhl;
}
</style>

<script>
    export default{
        props: {
            loading: {
                type: Boolean,
                required: true
            },
            color: {
                type: String,
                default: '#313131'
            }
        }
    }
</script>
